<template>
  <div class="card">
    <div class="card-header">
      <span class="tou">{{ title }}</span>
      <svg t="1652950233891" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
           p-id="3226" width="30" height="30"
      >
        <path
          d="M80.636017 479.622592l361.851305-332.651262 212.604142 204.220195L854.423325 122.847909 783.032368 47.317679l191.948707-0.024559-0.064468 191.93438-67.921949-67.986417L655.091464 450.431759l-212.847689-211.909317L127.064442 532.977777 80.636017 479.622592z"
          p-id="3227"
        ></path>
        <path d="M143.295102 619.319238l64.084551 0 0 323.364759-64.084551 0 0-323.364759Z" p-id="3228"></path>
        <path d="M399.17998 435.124122l64.084551 0 0 507.559874-64.084551 0 0-507.559874Z" p-id="3229"></path>
        <path d="M654.948201 559.967478l64.084551 0 0 382.716518-64.084551 0 0-382.716518Z" p-id="3230"></path>
        <path d="M910.774751 367.585913l64.084551 0 0 575.098083-64.084551 0 0-575.098083Z" p-id="3231"></path>
      </svg>
    </div>
    <div class="card-content">{{ count }}</div>
    <div class="card-charts">
      <slot name="charts"></slot>
    </div>
    <div class="card-footer">
      <slot name="footer" class="wangxia"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Index',
  props: ['title', 'count']
}
</script>

<style scoped>

.icon {
  float: right;
}

.card {
  height: 230px;
}

.tou {
  font-size: 20px;
}

.card-content {
  font-weight: bolder;
  font-size: 50px;
}

.card-charts {
  margin-top: 25px;
  padding-bottom: 10px;
}

.card-footer {
  border-top: 1px solid #eee;
  padding-top: 10px;
}

.card-footer {
  font-size: 20px;
}

</style>
